<template>
	<base-page title="更换银行卡" backgroundColor="white">
		<view class="p-16 fs-14 text-color-regular">
			<view>
				<view class="flex item-center">
					<text class="mr-8 flex-shrink" style="width:80px;">账户名称：</text>
					<input class="flex-1 h-36 text-color-regular bg-default radius-12 px-12 leading-20" v-model="formData.cardName" placeholder="请输入账户名称" placeholder-class="text-color-hint" />
				</view>
				<!-- <view class="fs-12 text-color-hint leading-17 mt-8" style="margin-left:84px;color:rgba(0, 0, 0, 0.30);">请填写与入驻时提供的身份证一致的银行卡信息</view> -->
			</view>
			<view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink" style="width:80px;">银行卡号：</text>
				<input class="flex-1 h-36 text-color-regular bg-default radius-12 px-12 leading-20" v-model="formData.cardNo" placeholder="请输入银行卡号" placeholder-class="text-color-hint" />
			</view>
			<view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink" style="width:80px;">开户银行：</text>
				<uni-data-select style="width: 100%;" class="bg-default radius-12" v-model="formData.bankCode" :localdata="bankRange"></uni-data-select>
			</view>
			<!-- <view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink" style="width:80px;">银行所在地：</text>
				<input class="flex-1 h-36 text-color-regular bg-default radius-12 px-12 leading-20" placeholder="请选择银行卡所在地" placeholder-class="text-color-hint" />
			</view> -->
			<view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink" style="width:80px;">手机号：</text>
				<input disabled :value="getPhone(userInfo.mobile)" class="flex-1 h-36 text-color-regular bg-default radius-12 px-12 leading-20" placeholder-class="text-color-hint" />
			</view>
			<view class="flex item-center mt-16">
				<view class="mr-8 flex-shrink" style="width:80px;">验证码：</view>
				<view class="flex item-center">
					<input type="text" placeholder="请输入短信验证码" class="flex-1 h-36 text-color-regular bg-default radius-12 px-12" v-model="formData.smsCode">
					<button type="primary" class="get-code-btn" @click="getCode"
						:class="{'unactive':codeTime>0}"
						:disabled="codeTime>0">{{codeTime>0? codeTime+'s' :'发送验证码'}}</button>
				</view>
			</view>
		</view>
		
		<template #footer>
			<view class="m-12 bg-primary radius-8 flex center h-46 fs-16 text-white" :style="disableSubmit?'opacity: 0.3;':''" @click="submit">确认</view>
		</template>
	</base-page>
</template>

<script setup name="ChangeBankCard">
	import uniDataSelect  from '@/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue';
	import { ref,computed, getCurrentInstance, onBeforeUnmount } from 'vue'
	import {useUserStore} from '@/stores/modules/user.js'
	import {sendSms} from '@/api/auth.js'
	import {listBank} from '@/api/common.js'
	import {bankCard, updateBankCard} from '@/wallet/api/withdrawal.js'
	import {onLoad} from '@dcloudio/uni-app';
	
	const userStore = useUserStore()
	const bankRange = ref([])
	let userInfo = computed(() => {
		return userStore.userInfo || {}
	})
	const originData = () => ({
		bankCode: '',
		cardName: '',
		cardNo: '',
		smsCode: '',
	});
	const codeTime = ref(null)
	const codeFn = ref(null)
	const getOpenerEventChannel = ref(null)
	const formData = ref(originData())
	const getPhone = (phone) => {
		return phone.replace(phone.substring(3, 7), "****")
	}
	const queryBank = () => {
		listBank().then(res => {
			bankRange.value = res.map(item => {
				return {
					text: item.name,
					value: item.code
				}
			})
		})
	}
	// 获取短信验证码
	const getCode = async () => {
		if (codeTime.value > 0) {
			return
		}
		uni.showLoading()
		let result = await sendSms({
			mobile: userInfo.value.mobile,
			type: 7
		})
		if (result) {
			uni.showToast({
				icon: 'none',
				title: '短信已发送，请注意查收'
			})
			codeTime.value = 60
			codeFn.value = setInterval(() => {
				if (codeTime.value <= 0) {
					clearInterval(codeFn.value)
					codeFn.value = null
					codeTime.value = null
				} else {
					codeTime.value = codeTime.value - 1
				}
			}, 1000)
		}
		uni.hideLoading()
	}
	const getBank = async() => {
		let bank = await bankCard()
		formData.value.bankCode = bank.bankCode
		formData.value.cardName = bank.cardName
		formData.value.cardNo = bank.cardNo
	}
	const disableSubmit = computed(() => {
		return !(formData.value.bankCode && formData.value.cardName && formData.value.cardNo && formData.value.smsCode)
	})
	
	const preRefresh = () => {
		getOpenerEventChannel.value.emit('onChangeSuccess')
	}
	
	const submit = () => {
		uni.showLoading()
		updateBankCard(formData.value).then(res => {
			console.log(res)
			uni.hideLoading()
			uni.showToast({
				icon:'none',
				title:'修改成功'
			})
			setTimeout(()=>{uni.navigateBack()},1000)
		}).catch(err => {
			uni.hideLoading()
			uni.showToast({
				icon:'none',
				title:err.message
			})
		})
	}
	onLoad(() => {
		getOpenerEventChannel.value = getCurrentInstance().ctx.getOpenerEventChannel()
		queryBank()
		getBank()
	})
	onBeforeUnmount(() => {
		preRefresh()
	})
</script>
<style scoped lang="scss">
	.get-code-btn {
		width: 202rpx;
		background: #00AEFF;
		border-radius: 24rpx;
		font-size: 14px;
		margin-right: 0;
		margin-left: 10px;
	
		&.unactive {
			background: #0ac6ff!important;
		}
	}
	.bg-default{
		background: #F5F5F5;
	}
	:deep(.uni-select){
		border: none;
	}
</style>